<template>
    <div class="dee-login-container">
       <div class="login">
            <span>用户名：</span><el-input
            placeholder="请输入用户名"
            class="userName"
            v-model="userInfo.username"
            @input="changeValueHandle()"
            />
            <span>密码：</span><el-input
            placeholder="请输入密码"
            class="passWord"
            type="password"
            v-model="userInfo.password"
            @input="changeValueHandle()"
            />
            <el-button
            id="login-btn"
            type="primary"
            @click="loginHandle()"
            >登录
            </el-button>
       </div>
    </div>
</template>
<script>
  import { getLogo } from '@/api/user';
  export default {
    data() {
      return {
        userInfo: {
          grant_type: 'access_token',
          username: 'sysadmin',
          password: 'deepaint'
        }
      };
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;// 监听路由重定向是否存在
          console.log(route.query, route.query.redirect);
        }, //  监听 路由变化 则执行的回调函数
        immediate: true // 为true时 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法
      }
    },
    methods: {
      loginHandle() {
        // 获取token
        this.$store.dispatch('user/login', this.userInfo).then(() => {
          // console.log(this.$store.state.user)
          // 获取logo
          getLogo();
          // 获取用户信息
          this.$store.dispatch('user/getInfo').then(() => {
            // console.log(this.$store.getters.userInfo.truename)
            this.$router.push({ path: this.redirect || '/' });// 存在重定向则使用重定向，否则就跳转到首页
          });
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
@import "../../assets/scss/_mixins";
.dee-login-container{
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    @include clearfix();
    @include flex-center();
    .login{
        width: 600px;
        height:400px;
    }
    #login-btn{
        margin-top:30px;
        margin-left: 285px;
    }
}

</style>
